<div class="content-section introduction">
    <div>
        <span class="feature-title">SelectButton</span>
        <span>SelectButton is used to choose single or multiple items from a list using buttons.</span>
    </div>
</div>

<div class="content-section implementation">
    <h3 class="first">Single</h3>
    <p-selectButton [options]="types" [(ngModel)]="selectedType"></p-selectButton>

    <p>Selected Type: <span style="font-weight: bold">{{selectedType}}</span></p>

    <h3>Multiple</h3>
    <p-selectButton [options]="types" [(ngModel)]="selectedTypes" multiple="multiple"></p-selectButton>
    <p>Selected Types: <span style="font-weight: bold" *ngFor="let type of selectedTypes">{{type}} </span></p>

    <h3>Icon Only</h3>
    <p-selectButton [options]="modes" [(ngModel)]="selectedModes" multiple="multiple"></p-selectButton>
    <p>Selected Modes: <span style="font-weight: bold" *ngFor="let mode of selectedModes">{{mode}} </span></p>

    <h3>Custom Template</h3>
    <p-selectButton [options]="countries" [(ngModel)]="selectedCountry">
        <ng-template let-item>
            <div style="padding: .5em 1em">
                <img style="vertical-align: middle; margin-right: .5em" src="assets/showcase/images/demo/flag/{{item.flag}}" height="20px"/>
                <span>{{item.name}}</span>
            </div>
        </ng-template>
    </p-selectButton>
    <p>Selected Country: <span style="font-weight: bold">{{selectedCountry?.name}}</span></p>

    <hr>
    <button type="button" (click)="clear()" pButton icon="pi pi-times" label="Clear"></button>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="Documentation">
            <h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;SelectButtonModule&#125; from 'primeng/selectbutton';
</code>
</pre>

            <h3>Getting Started</h3>
            <p>SelectButton requires a value to bind and a collection of options. There are two alternatives of how to define the options property; one way is providing a collection of SelectItem
            instances whereas other way is providing an array of arbitrary objects along with the optionLabel property to specify the field name of the option. SelectItem API is designed to have more control on how 
            the options are displayed such as grouping and disabling however in most cases an arbitrary object collection will suffice. Example below demonstrates both cases.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-selectButton [options]="cities1" [(ngModel)]="selectedCity1"&gt;&lt;/p-selectButton&gt;

&lt;p-selectButton [options]="cities2" [(ngModel)]="selectedCity2" optionLabel="name"&gt;&lt;/p-selectButton&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;SelectItem&#125; from 'primeng/api';

export class MyModel &#123;

    cities1: SelectItem[];

    cities2: City[];

    selectedCity1: City;

    selectedCity2: City;

    constructor() &#123;
      //SelectItem API with label-value pairs
      this.cities1 = [
          &#123;label:'Select City', value:null&#125;,
          &#123;label:'New York', value:&#123;id:1, name: 'New York', code: 'NY'&#125;&#125;,
          &#123;label:'Rome', value:&#123;id:2, name: 'Rome', code: 'RM'&#125;&#125;,
          &#123;label:'London', value:&#123;id:3, name: 'London', code: 'LDN'&#125;&#125;,
          &#123;label:'Istanbul', value:&#123;id:4, name: 'Istanbul', code: 'IST'&#125;&#125;
          &#123;label:'Paris', value:&#123;id:5, name: 'Paris', code: 'PRS'&#125;&#125;
      ];
      
      //An array of cities
      this.cities2 = [
          &#123;name: 'New York', code: 'NY'&#125;,
          &#123;name: 'Rome', code: 'RM'&#125;,
          &#123;name: 'London', code: 'LDN'&#125;,
          &#123;name: 'Istanbul', code: 'IST'&#125;,
          &#123;name: 'Paris', code: 'PRS'&#125;
      ];
    &#125;

&#125;
</code>
</pre>

            <h3>Multiple</h3>
            <p>SelectButton allows selecting only one item by default and setting multiple option enables choosing more than one item. 
                In multiple case, model property should be an array instance that is not null or undefined.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-selectButton [options]="cities" [(ngModel)]="selectedCities"&gt;&lt;/p-selectButton&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;SelectItem&#125; from 'primeng/api';

export class MyModel &#123;

    cities: SelectItem[];

    selectedCities: string[] = [];

    constructor() &#123;
        this.cities = [];
        this.cities.push(&#123;label:'New York', value:'New York'&#125;);
        this.cities.push(&#123;label:'Rome', value:'Rome'&#125;);
        this.cities.push(&#123;label:'London', value:'London'&#125;);
        this.cities.push(&#123;label:'Istanbul', value:'Istanbul'&#125;);
        this.cities.push(&#123;label:'Paris', value:'Paris'&#125;);
    &#125;

&#125;
</code>
</pre>

            <h3>Model Driven Forms</h3>
            <p>SelectButton can be used in a model driven form as well.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-selectButton [options]="cities" formControlName="selectedCity"&gt;&lt;/p-selectButton&gt;
</code>
</pre>

            <h3>Icons</h3>
            <p>Button options can display icons using the icon property of the SelectItem API.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-selectButton [options]="types" [(ngModel)]="selectedType"&gt;&lt;/p-selectButton&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class SelectButtonDemo &#123;

    types: SelectItem[];

    selectedType: string;

    constructor() &#123;
        this.types = [];
        this.types.push(&#123;title: 'Paypal', value: 'PayPal', icon: 'fa fa-fw fa-cc-paypal'&#125;);
        this.types.push(&#123;title: 'Visa', value: 'Visa', icon: 'fa fa-fw fa-cc-visa'&#125;);
        this.types.push(&#123;title: 'MasterCard', value: 'MasterCard', icon: 'fa fa-fw fa-cc-mastercard'&#125;);
    &#125;
&#125;
</code>
</pre>

            <h3>Disabled Options</h3>
            <p>Particular options can be prevented from selection using the disabled property of SelectItem API.</p>

            <h3>Templating</h3>
            <p>Items support templating to display custom content inside the buttons using an ng-template that receives the option as the implicit variable.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-selectButton [options]="countries" [(ngModel)]="selectedCountry"&gt;
    &lt;ng-template let-item&gt;
        &lt;img src="assets/showcase/images/demo/flag/&#123;&#123;item.flag&#125;&#125;" /&gt;
        &lt;span&gt;&#123;&#123;item.name&#125;&#125;&lt;/span&gt;
    &lt;/ng-template&gt;
&lt;/p-selectButton&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class SelectButtonDemo &#123;
        
    countries: any[];

    selectedCountry: any;

    constructor() &#123;
        this.countries = [
            &#123;name: 'USA', flag: 'usa.png'&#125;,
            &#123;name: 'Germany', flag: 'germany.png'&#125;,
            &#123;name: 'Japan', flag: 'japan.png'&#125;
        ];
    &#125;

&#125;
</code>
</pre>


            <h3>Properties</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Default</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>options</td>
                            <td>array</td>
                            <td>null</td>
                            <td>An array of selectitems to display as the available options.</td>
                        </tr>
                        <tr>
                            <td>optionLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options.</td>
                        </tr>
                        <tr>
                            <td>multiple</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When specified, allows selecting multiple values.</td>
                        </tr>
                        <tr>
                            <td>tabindex</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Index of the element in tabbing order.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                        <tr>
                            <td>disabled</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, it specifies that the element should be disabled.</td>
                        </tr>
                        <tr>
                            <td>dataKey</td>
                            <td>string</td>
                            <td>null</td>
                            <td>A property to uniquely identify a value in options.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Events</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Parameters</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onChange</td>
                            <td>event.originalEvent: browser event<br />
                                event.value: single value or an array of values that are selected
                            </td>
                            <td>Callback to invoke when value changes.</td>
                        </tr>
                        <tr>
                            <td>onOptionClick</td>
                            <td>event.originalEvent: browser event<br />
                                event.option: SelectItem instance of the clicked button<br />
                                event.index: Index of the clicked button
                            </td>
                            <td>Callback to invoke when a button is clicked.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Dependencies</h3>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/selectbutton" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;h3 class="first"&gt;Single&lt;/h3&gt;
&lt;p-selectButton [options]="types" [(ngModel)]="selectedType"&gt;&lt;/p-selectButton&gt;

&lt;p&gt;Selected Type: &lt;span style="font-weight: bold"&gt;&#123;&#123;selectedType&#125;&#125;&lt;/span&gt;&lt;/p&gt;

&lt;h3&gt;Multiple&lt;/h3&gt;
&lt;p-selectButton [options]="types" [(ngModel)]="selectedTypes" multiple="multiple"&gt;&lt;/p-selectButton&gt;
&lt;p&gt;Selected Types: &lt;span style="font-weight: bold" *ngFor="let type of selectedTypes"&gt;&#123;&#123;type&#125;&#125; &lt;/span&gt;&lt;/p&gt;

&lt;h3&gt;Icon Only&lt;/h3&gt;
&lt;p-selectButton [options]="modes" [(ngModel)]="selectedModes" multiple="multiple"&gt;&lt;/p-selectButton&gt;
&lt;p&gt;Selected Modes: &lt;span style="font-weight: bold" *ngFor="let mode of selectedModes"&gt;&#123;&#123;mode&#125;&#125; &lt;/span&gt;&lt;/p&gt;

&lt;h3&gt;Custom Template&lt;/h3&gt;
&lt;p-selectButton [options]="countries" [(ngModel)]="selectedCountry"&gt;
    &lt;ng-template let-item&gt;
        &lt;div style="padding: .5em 1em"&gt;
            &lt;img style="vertical-align: middle; margin-right: .5em" src="assets/showcase/images/demo/flag/&#123;&#123;item.flag&#125;&#125;" height="20px"/&gt;
            &lt;span&gt;&#123;&#123;item.name&#125;&#125;&lt;/span&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-selectButton&gt;
&lt;p&gt;Selected Country: &lt;span style="font-weight: bold"&gt;&#123;&#123;selectedCountry?.name&#125;&#125;&lt;/span&gt;&lt;/p&gt;

&lt;hr&gt;
&lt;button type="button" (click)="clear()" pButton icon="pi pi-times" label="Clear"&gt;&lt;/button&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class SelectButtonDemo &#123;

    types: SelectItem[];

    selectedType: string;

    selectedTypes: string[] = ['PayPal','MasterCard'];

    selectedModes: string[];

    modes: SelectItem[];

    countries: any[];

    selectedCountry: any;

    constructor() &#123;
        this.types = [
            &#123;label: 'Paypal', value: 'PayPal', icon: 'fa fa-fw fa-cc-paypal'&#125;,
            &#123;label: 'Visa', value: 'Visa', icon: 'fa fa-fw fa-cc-visa'&#125;,
            &#123;label: 'MasterCard', value: 'MasterCard', icon: 'fa fa-fw fa-cc-mastercard'&#125;
        ];

        this.modes = [
            &#123;value: 'Bold', title: 'Bold', icon: 'fa fa-fw fa-bold'&#125;,
            &#123;value: 'Italic', title: 'Italic', icon: 'fa fa-fw fa-italic'&#125;,
            &#123;value: 'Underline', title: 'Underline', icon: 'fa fa-fw fa-underline'&#125;
        ];

        this.countries = [
            &#123;name: 'USA', flag: 'usa.png'&#125;,
            &#123;name: 'Germany', flag: 'germany.png'&#125;,
            &#123;name: 'Japan', flag: 'japan.png'&#125;
        ];
    &#125;

    clear() &#123;
        this.selectedType = null;
        this.selectedTypes = [];
        this.selectedModes = [];
        this.selectedCountry = null;
    &#125;
&#125;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>